<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.1,maximum-scale=10,user-scalable=yes" />
  <script charset="utf-8" src="http://221.226.124.194:8950/zhcg/js/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
   <style>
		#park{height:98%;width:auto;position:absolute;}	
	</style>
	<script>
		var p,height;
		$(function(){
			height = document.getElementById("park").offsetHeight;
			p= height/1783;
			var h_a = 1783*p;
			var w_a = 2270*p;
			$("#park").css("width",w_a+"px");
			$("#park").css("backgroundImage","url(park.png)");
			$("#park").css("background-repeat","no-repeat");
			$("#park").css("background-size","auto "+h_a+"px");
			
		});
		//���س�λ��ӦͼƬ
		function load(str) {
            alert("11111");
			for(var i=1;i<204;i++){
				i=PrefixInteger(i,3);
				document.getElementById("i"+i).innerHTML = "";

			}
            alert("3333");
            
			str=JSON.parse(str);
            alert("444");

			var result=eval(str.result);
					$.each(result, function() {
						if(this.status==0){
							var w,h;
						   	var id=parseInt(this.parkNumber, 10);
						   	var t=parseInt(this.top, 10);
						   	var l=parseInt(this.left, 10);
						   	var top=t*p;
				    		var left=l*p;
				    		if((id<=15)||(id>=104&&id<=113)||(id>=29&&id<=34)||(id>=180&&id<=188)||(id>=119&&id<=142)){
				    			w = p*42;h = p*20;
				    		}else{
				    			if((id>=49&&id<=53)||(id>=114&&id<=118)){
									w = p*48;h = p*36;
									}else{
										if(id>=170&&id<=179){
							    			w = p*48;h = p*45;
							    	}else{
							    		if(id>=158&&id<=169){
								    		w = p*44;h = p*48;
								    	}else{
								    		if(id==157){
								    			w = p*44;h = p*58;
								    		}else{
								    			if(id==156){
								    				w = p*44;h = p*43;
								    			}else{
								    				if((id>=54&&id<=103)||(id>=16&&id<=28)||(id>=35&&id<=48)||(id>=189&&id<=203)||(id>=143&&id<=155)){
										   				w = p*21;h = p*42;
											   		};
								    			};
								   			};
							   			};
							    	};
					    		};
					   		};
		    				document.getElementById("i"+this.parkNumber).innerHTML = "<img src='"+this.parkNumber+".png' style='position:absolute;top:"+top+"px;left:"+left+"px; width:"+w+"px;height:auto;'/>";
						}
	    		});
		}

		
		function PrefixInteger(num, n) {
       return (Array(n).join(0) + num).slice(-n);
    }
	</script>
  </head>
	<body class="easyui-layout">
        
        
		<div id="park">
			<div id="i001"></div>
			<div id="i002"></div>
			<div id="i003"></div>
			<div id="i004"></div>
			<div id="i005"></div>
			<div id="i006"></div>
			<div id="i007"></div>
			<div id="i008"></div>
			<div id="i009"></div>
			<div id="i010"></div>
			<div id="i011"></div>
			<div id="i012"></div>
			<div id="i013"></div>
			<div id="i014"></div>
			<div id="i015"></div>
			<div id="i016"></div>
			<div id="i017"></div>
			<div id="i018"></div>
			<div id="i019"></div>
			<div id="i020"></div>
			<div id="i021"></div>
			<div id="i022"></div>
			<div id="i023"></div>
			<div id="i024"></div>
			<div id="i025"></div>
			<div id="i026"></div>
			<div id="i027"></div>
			<div id="i028"></div>
			<div id="i029"></div>
			<div id="i030"></div>
			<div id="i031"></div>
			<div id="i032"></div>
			<div id="i033"></div>
			<div id="i034"></div>
			<div id="i035"></div>
			<div id="i036"></div>
			<div id="i037"></div>
			<div id="i038"></div>
			<div id="i039"></div>
			<div id="i040"></div>
			<div id="i041"></div>
			<div id="i042"></div>
			<div id="i043"></div>
			<div id="i041"></div>
			<div id="i042"></div>
			<div id="i043"></div>
			<div id="i044"></div>
			<div id="i045"></div>
			<div id="i046"></div>
			<div id="i047"></div>
			<div id="i048"></div>
			<div id="i049"></div>
			<div id="i050"></div>
			<div id="i051"></div>
			<div id="i052"></div>
			<div id="i053"></div>
			<div id="i054"></div>
			<div id="i055"></div>
			<div id="i056"></div>
			<div id="i057"></div>
			<div id="i058"></div>
			<div id="i059"></div>
			<div id="i060"></div>
			<div id="i061"></div>
			<div id="i062"></div>
			<div id="i063"></div>
			<div id="i061"></div>
			<div id="i062"></div>
			<div id="i063"></div>
			<div id="i064"></div>
			<div id="i065"></div>
			<div id="i066"></div>
			<div id="i067"></div>
			<div id="i068"></div>
			<div id="i069"></div>
			<div id="i070"></div>
			<div id="i071"></div>
			<div id="i072"></div>
			<div id="i073"></div>
			<div id="i074"></div>
			<div id="i075"></div>
			<div id="i076"></div>
			<div id="i077"></div>
			<div id="i078"></div>
			<div id="i079"></div>
			<div id="i080"></div>
			<div id="i081"></div>
			<div id="i082"></div>
			<div id="i083"></div>
			<div id="i081"></div>
			<div id="i082"></div>
			<div id="i083"></div>
			<div id="i084"></div>
			<div id="i085"></div>
			<div id="i086"></div>
			<div id="i087"></div>
			<div id="i088"></div>
			<div id="i089"></div>
			<div id="i090"></div>
			<div id="i091"></div>
			<div id="i092"></div>
			<div id="i093"></div>
			<div id="i094"></div>
			<div id="i095"></div>
			<div id="i096"></div>
			<div id="i097"></div>
			<div id="i098"></div>
			<div id="i099"></div>
			<div id="i100"></div>
			<div id="i101"></div>
			<div id="i102"></div>
			<div id="i103"></div>
			<div id="i104"></div>
			<div id="i105"></div>
			<div id="i106"></div>
			<div id="i107"></div>
			<div id="i108"></div>
			<div id="i109"></div>
			<div id="i110"></div>
			<div id="i111"></div>
			<div id="i112"></div>
			<div id="i113"></div>
			<div id="i114"></div>
			<div id="i115"></div>
			<div id="i116"></div>
			<div id="i117"></div>
			<div id="i118"></div>
			<div id="i119"></div>
			<div id="i120"></div>
			<div id="i121"></div>
			<div id="i122"></div>
			<div id="i123"></div>
			<div id="i124"></div>
			<div id="i125"></div>
			<div id="i126"></div>
			<div id="i127"></div>
			<div id="i128"></div>
			<div id="i129"></div>
			<div id="i130"></div>
			<div id="i131"></div>
			<div id="i132"></div>
			<div id="i133"></div>
			<div id="i134"></div>
			<div id="i135"></div>
			<div id="i136"></div>
			<div id="i137"></div>
			<div id="i138"></div>
			<div id="i139"></div>
			<div id="i140"></div>
			<div id="i141"></div>
			<div id="i142"></div>
			<div id="i143"></div>
			<div id="i141"></div>
			<div id="i142"></div>
			<div id="i143"></div>
			<div id="i144"></div>
			<div id="i145"></div>
			<div id="i146"></div>
			<div id="i147"></div>
			<div id="i148"></div>
			<div id="i149"></div>
			<div id="i150"></div>
			<div id="i151"></div>
			<div id="i152"></div>
			<div id="i153"></div>
			<div id="i154"></div>
			<div id="i155"></div>
			<div id="i156"></div>
			<div id="i157"></div>
			<div id="i158"></div>
			<div id="i159"></div>
			<div id="i160"></div>
			<div id="i161"></div>
			<div id="i162"></div>
			<div id="i163"></div>
			<div id="i161"></div>
			<div id="i162"></div>
			<div id="i163"></div>
			<div id="i164"></div>
			<div id="i165"></div>
			<div id="i166"></div>
			<div id="i167"></div>
			<div id="i168"></div>
			<div id="i169"></div>
			<div id="i170"></div>
			<div id="i171"></div>
			<div id="i172"></div>
			<div id="i173"></div>
			<div id="i174"></div>
			<div id="i175"></div>
			<div id="i176"></div>
			<div id="i177"></div>
			<div id="i178"></div>
			<div id="i179"></div>
			<div id="i180"></div>
			<div id="i181"></div>
			<div id="i182"></div>
			<div id="i183"></div>
			<div id="i181"></div>
			<div id="i182"></div>
			<div id="i183"></div>
			<div id="i184"></div>
			<div id="i185"></div>
			<div id="i186"></div>
			<div id="i187"></div>
			<div id="i188"></div>
			<div id="i189"></div>
			<div id="i190"></div>
			<div id="i191"></div>
			<div id="i192"></div>
			<div id="i193"></div>
			<div id="i194"></div>
			<div id="i195"></div>
			<div id="i196"></div>
			<div id="i197"></div>
			<div id="i198"></div>
			<div id="i199"></div>
			<div id="i200"></div>
			<div id="i201"></div>
			<div id="i202"></div>
			<div id="i203"></div>
		</div>
  	</body>
</html>
